<template>
    <span :class="{ flash: flash }"><el-tag type="danger" v-if="needFlash">紧急</el-tag> {{ taskContent }} </span>
</template>
<script>
export default {
    name: "FlashTaskModule",
    props: {
        needFlash: {
            type: Boolean,
            default: false,
        },
        taskContent: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            flash: false,
            timer: null,
        };
    },
    mounted() {
        if (this.needFlash) {
            this.setFlash();
        }
    },
    methods: {
        setFlash() {
            this.timer = setInterval(() => {
                this.flash = !this.flash;
            }, 500);
        },
    },
    watch: {
        needFlash(val) {
            if (val) {
                this.setFlash();
            } else {
                clearTimeout(this.timer);
                this.flash = false;
            }
        },
    },
};
</script>
<style lang="scss">
.flash {
    color: red !important;
}
</style>
